<template >
    <van-icon :name="value? 'star':'star-o'" :class="{
        collected: value
    }" 
    :loading="loading"
    @click="operateCollection"/>
</template>
<script>
import { addCollections, cancleCollections} from "@/apis/article"
export default {
    props: {
        value: {
            type:Boolean,
            required:true
        },
        artId: {
            type: [Number, String, Object],
            required: true
        }
    },
    data() {
        return {
            loading:false
        }
    },
    methods: {
        async operateCollection() {
            this.loading = true
            try {
                if (this.value) {
                    const data = await addCollections(this.artId)
                    console.log(data);
                } else {
                    const data = await cancleCollections(this.artId)
                    console.log(data);
                }
                this.loading = false
                console.log('触发收藏',!this.value);
                this.$emit('input', !this.value)
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>
<style lang="less" scoped>

    .collected {
        color: #ffa500;
    }

    
</style>